<!-- eslint-disable unused-imports/no-unused-vars -->
<script setup lang="ts">
import { ElMessage } from "element-plus"
import { onMounted } from "vue"
import { useRouter } from "vue-router"
import { useApplicationStore } from "@/pinia/stores/application"

const router = useRouter()
const applicationStore = useApplicationStore()

// 加载申请列表
async function loadApplications() {
  try {
    await applicationStore.fetchUserApplications()
  } catch (error) {
    ElMessage.error("加载申请列表失败")
  }
}

// 获取状态类型
function getStatusType(status: string) {
  const statusMap: Record<string, any> = {
    报名待审核: "warning", // 报名待审核
    报名通过: "success", // 报名通过
    面试通过: "success", // 面试通过
    面试未通过: "danger", // 面试未通过
    已入职: "success" // 已入职
  }
  return statusMap[status] || "info"
}

// 格式化时间
function formatTime(timeString: string) {
  if (!timeString) return ""
  return new Date(timeString).toLocaleString("zh-CN")
}

// 查看岗位详情
function viewPositionDetail(positionId: number) {
  router.push(`/internship/position-student/detail/${positionId}`)
}

onMounted(() => {
  loadApplications()
})
</script>

<template>
  <div class="application-student-page">
    <div class="page-header">
      <div class="page-container">
        <h1 class="page-title">
          我的岗位申请
        </h1>
      </div>
    </div>

    <div class="page-container">
      <div class="application-content">
        <!-- 加载状态 -->
        <div v-if="applicationStore.isLoadingApplications" class="loading-container">
          <el-skeleton :rows="5" animated />
        </div>

        <!-- 错误状态 -->
        <div v-else-if="applicationStore.applicationsError" class="error-container">
          <el-result
            icon="error"
            title="加载失败"
            :sub-title="applicationStore.applicationsError"
          >
            <template #extra>
              <el-button type="primary" @click="loadApplications">
                重新加载
              </el-button>
            </template>
          </el-result>
        </div>

        <!-- 空状态 -->
        <div v-else-if="applicationStore.userApplications.length === 0" class="empty-container">
          <el-result
            icon="info"
            title="暂无申请记录"
            sub-title="您还没有申请任何岗位"
          >
            <template #extra>
              <el-button type="primary" @click="$router.push('/internship/position-student')">
                去申请岗位
              </el-button>
            </template>
          </el-result>
        </div>

        <!-- 申请列表 -->
        <div v-else class="application-list">
          <div
            v-for="application in applicationStore.userApplications"
            :key="application.id"
            class="application-card"
          >
            <div class="application-header">
              <div class="application-title">
                <h3 class="position-name">
                  {{ application.positionName }}
                </h3>
                <span class="company-name">{{ application.companyName }}</span>
              </div>
              <el-tag :type="getStatusType(application.applicationStatus)" class="status-tag">
                {{ application.applicationStatus }}
              </el-tag>
            </div>

            <div class="application-info">
              <div class="info-item">
                <span class="info-label">申请时间：</span>
                <span class="info-value">{{ formatTime(application.submitTime) }}</span>
              </div>

              <div v-if="application.reviewTime" class="info-item">
                <span class="info-label">审核时间：</span>
                <span class="info-value">{{ formatTime(application.reviewTime) }}</span>
              </div>

              <div v-if="application.reviewRemark" class="info-item">
                <span class="info-label">审核备注：</span>
                <span class="info-value">{{ application.reviewRemark }}</span>
              </div>
            </div>

            <div class="application-actions">
              <el-button
                type="primary"
                link
                @click="viewPositionDetail(application.positionId)"
              >
                查看岗位详情
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.application-student-page {
  background-color: #f7f8fa;
  min-height: calc(100vh - 64px);
}

.page-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px 16px;
}

.page-header {
  position: sticky;
  top: 0;
  z-index: 9;
  background: linear-gradient(90deg, #f0f6ff 0%, #f7fbff 100%);
  border-bottom: 1px solid #eef2f7;

  .page-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
  }

  .page-title {
    font-size: 20px;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
  }

  .page-description {
    color: #6b7280;
    margin: 0;
  }
}

.loading-container,
.error-container,
.empty-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
}

.application-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.application-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 20px;
  transition: all 0.2s;

  &:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  }
}

.application-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.application-title {
  .position-name {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 4px 0;
  }

  .company-name {
    color: #6b7280;
    font-size: 14px;
  }
}

.status-tag {
  font-weight: 500;
}

.application-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.info-item {
  display: flex;
  align-items: center;

  .info-label {
    color: #6b7280;
    font-size: 14px;
    min-width: 80px;
  }

  .info-value {
    color: #1f2937;
    font-size: 14px;
  }
}

.application-actions {
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 768px) {
  .application-student-page {
    padding: 16px;
  }

  .application-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .info-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}
</style>
